<template>
  <s-popup v-model="showPopup" position="bottom" round :mask="true" mask-close>
    <view class="change-password-container">
      <view class="title">修改密码</view>

      <view class="form-item">
        <text class="label">旧密码</text>
        <uni-easyinput
          v-model="form.old_password"
          type="password"
          placeholder="请输入旧密码"
          clearable
        />
      </view>

      <view class="form-item">
        <text class="label">新密码</text>
        <uni-easyinput
          v-model="form.new_password"
          type="password"
          placeholder="请输入新密码"
          clearable
        />
      </view>

      <view class="form-item">
        <text class="label">确认新密码</text>
        <uni-easyinput
          v-model="form.confirm_password"
          type="password"
          placeholder="请确认新密码"
          clearable
        />
      </view>

      <view class="button-group">
        <s-button type="default" size="small" @click="closePopup"
          >取消</s-button
        >
        <s-button
          type="primary"
          size="small"
          @click="submitForm"
          :loading="loading"
          >确认修改</s-button
        >
      </view>
    </view>
  </s-popup>
</template>
  
  <script>
export default {
  name: "v-change-password",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showPopup: false,
      loading: false,
      form: {
        old_password: "",
        new_password: "",
        confirm_password: "",
      },
    };
  },
  watch: {
    value(newVal) {
      this.showPopup = newVal;
      if (newVal) {
        this.resetForm();
      }
    },
    showPopup(newVal) {
      this.$emit("input", newVal);
    },
  },
  methods: {
    resetForm() {
      this.form = {
        old_password: "",
        new_password: "",
        confirm_password: "",
      };
    },
    closePopup() {
      this.showPopup = false;
    },
    submitForm() {
      if (!this.validateForm()) {
        return;
      }

      this.loading = true;

      this.sjuAjax.post(
        "/user/changePass",
        {
          old_password: this.form.old_password,
          new_password: this.form.new_password,
        },
        (res) => {
          this.loading = false;
          if (res && res.code === 200) {
            uni.showToast({
              title: res.msg,
              icon: "success",
            });
            this.sjuLogin.clearToken();
            setTimeout(() => {
              this.sjuNav.navigateTo("pages/user/login");
            }, 1500);
          }
        },
        () => {
          this.loading = false;
        }
      );
    },
    validateForm() {
      if (!this.form.old_password) {
        uni.showToast({
          title: "请输入旧密码",
          icon: "none",
        });
        return false;
      }

      if (!this.form.new_password) {
        uni.showToast({
          title: "请输入新密码",
          icon: "none",
        });
        return false;
      }

      if (this.form.new_password !== this.form.confirm_password) {
        uni.showToast({
          title: "两次输入的新密码不一致",
          icon: "none",
        });
        return false;
      }

      return true;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.change-password-container {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
  }

  .form-item {
    margin-top: 32rpx;
    padding: 0 32rpx;

    .label {
      display: block;
      margin-bottom: 16rpx;
      font-size: 28rpx;
      color: #666;
    }
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 60rpx;

    .s-button {
      flex: 1;
      margin: 0 10rpx;
    }
  }
}
</style>